<template>
  <div>
    <div>
      <el-card shadow="always">
        <el-row v-if="showAvatarAndName" :gutter="12">
          <el-col :span="12">
            个人头像：<img :src="avatar+this.$store.state.user.userinfo.avatar" width="80px" height="80px"
                      class="v-a-text-top" v-loading="queryfullscreenLoading"/>
            <el-button type="success" class="min-icon" @click="updateAvatar" :disabled="queryfullscreenLoading">修改头像
            </el-button>
          </el-col>

          <el-col :span="12">
            <span>个人账号</span>：
            {{$store.state.user.userinfo.user_name}}
          </el-col>
        </el-row>
        <el-row><br/></el-row>
        <el-row :gutter="12">

          <el-col :span="12" v-if="isSubagent">
            <span>个人昵称</span>：{{$store.state.user.userinfo.nickname}}
            <el-button v-if="showChangeNikeName" type="success" class="min-icon" @click="changeNikeName">编辑</el-button>
          </el-col>
          <el-col :span="12" v-if="!isSubagent">
            <span>代理账号</span>：{{$store.state.user.userinfo.user_name}}
          </el-col>

          <el-col :span="12">
            <span>当前余额</span>：{{$store.state.user.userinfo.balance/100}}
          </el-col>
        </el-row>
        <el-row><br/></el-row>
        <el-row :gutter="12">
          <el-col :span="12">
            <span>代&nbsp;理&nbsp;&nbsp;ID</span>：{{$store.state.user.userinfo.id}}
          </el-col>
          <el-col :span="12">
            <span> 绑定商户</span>：
            <span v-for="(item,index) of $store.state.user.userinfo.mchs" :key="index">
                               {{ item.name }}
                                <span v-if="index!==$store.state.user.userinfo.mchs.length-1">\</span>
                            </span>
          </el-col>
        </el-row>
        <el-row v-if="$store.getters.userinfo.agency_type === 1"><br/></el-row>
        <el-row :gutter="12" v-if="$store.getters.userinfo.agency_type === 1">
          <el-col :span="12">
            <span>综合评分</span>：{{$store.state.user.userinfo.score}}
            <el-tooltip placement="right" effect="light">
              <div slot="content">订单成交加分，订单金额越大分数越高。<br/>好评加分，差评扣分</div>

              <el-button type="success" class="min-icon" size="mini">&nbsp;?&nbsp;</el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="12">
            <span>代理等级</span>：{{$store.state.user.userinfo.level}}

            <el-tooltip placement="right" effect="light">
              <div slot="content" v-html="levelcontent "></div>

              <el-button type="success" class="min-icon" size="mini">&nbsp;?&nbsp;</el-button>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row v-if="$store.getters.userinfo.agency_type === 1"><br/></el-row>
        <el-row :gutter="12" v-if="$store.getters.userinfo.agency_type === 1">
          <el-col :span="12">
            <span>评&nbsp;&nbsp;价&nbsp;&nbsp;数</span>：{{$store.state.user.userinfo.comment_count}}
          </el-col>
          <el-col :span="12">
            <span>星级评分</span>：{{$store.state.user.userinfo.comment_star}}
          </el-col>
        </el-row>
        <el-row v-if="$store.getters.userinfo.agency_type === 1"><br/></el-row>
        <el-row :gutter="12" v-if="$store.getters.userinfo.agency_type === 1">
          <el-col :span="12">
            <span>账号自动下发</span>：{{UserLevel[$store.state.user.userinfo.auto_show_level]}}
            <el-tooltip placement="right" effect="light">
              <div slot="content">满足条件的用户才可以收到自动下发的收款账号。</div>
              <el-button type="success" class="min-icon" size="mini">&nbsp;?&nbsp;</el-button>
            </el-tooltip>
            <el-button type="success" class="min-icon" @click="changeShowLevel">编辑</el-button>
          </el-col>
        </el-row>
      </el-card>

    </div>
    <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id"></save-update>
    <modify-name v-if="showModify" :showUpdate.sync="showModify" :id="show_id"></modify-name>
    <modify-auto-level v-if="showAutoLevel" :showUpdate.sync="showAutoLevel"
                       :auto_show_level="$store.state.user.userinfo.auto_show_level"></modify-auto-level>
  </div>
</template>

<script>
  import saveUpdate from './saveUpdate'
  import saveUpdate1 from '../QuickReply/saveUpdate'
  import modifyName from './modifyName'
  import modifyAutoLevel from './modifyAutoLevel'
  import {updateAgencyMenber, getRankConf, getQuickReplyList} from '@/api/index'

  export default {
    components: {saveUpdate, modifyName, modifyAutoLevel,saveUpdate1},
    data() {
      return {
        agencylable: {
          nickname: '昵称'
        },
        showUpdate: false,
        showModify: false,
        showAutoLevel: false,
        showAvatarAndName:false,
        showChangeNikeName:false,
        show_id: null,
        avatar: 'http://image.barchain.net/',
        queryfullscreenLoading: false,
        value1: true,
        value2: true,
        UserLevel: this.$store.state.app.UserLevel,
        levelcontent: '暂无',
        listData: {},
        q: {page_size: 30, page_no: 1},
        listLoading: false,
      }
    },
    created() {
    },
    activated() {
      this.RankConf();
    },
    computed:{
      // 是否是子代
      isSubagent(){
        return this.$store.getters.userinfo.agency_type === 1
      }
    },
    methods: {
      RankConf() {
        if (this.$store.getters.userinfo.agency_type === 1) {
          this.levelcontent = "升级条件：</br>";
          getRankConf().then(res => {
            if (res.status === 0) {
              for (var [key, value] of res.data) {
                this.levelcontent += value + "级：评分达到" + key + "</br>"
              }
            }
          })
        }
      },
      changeNikeName() {
        this.showModify = true
      },
      changeShowLevel() {
        this.showAutoLevel = true
      },
      changeInfo(key) {
        this.$confirm(`确认要修改${this.agencylable[key]}吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return setTimeout(() => {
            this.$prompt(`请输入${this.agencylable[key]}`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              inputPlaceholder: "不超过12个汉字",
            }).then(({value}) => {
              updateAgencyMenber({[key]: value}, this.$store.state.user.userinfo.id).then(res => {
                if (res.status === 0) {
                  this.$message.success('修改成功')
                  this.getMenberInfo()
                }
              })
            });
          }, 500);
        })
      },
      getMenberInfo() {
        this.$store.dispatch('GetInfo')
      },
      updateAvatar() {
        this.show_id = null
        this.showUpdate = true
      }
    },
    watch: {
      showUpdate() {
        if (!this.showUpdate) {
          this.queryfullscreenLoading = true;
          this.$store.dispatch('GetInfo')
          this.queryfullscreenLoading = false;
        }
      },
      showModify(val) {
        if (!val) {
          this.getMenberInfo()
        }
      }
    }
  }
</script>
<style>
  .min-icon {
    padding: 2px 2px;
  }
</style>
